<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script src="../jquery-3.1.1.js"></script>

<script type="text/javascript">
	var flag = true;
	$(function() {
		$("#toggle").click(function() {
			var tds = document.getElementsByTagName("td");
			for ( var i in tds) {
				if (tds[i].innerHTML == undefined) {
					break;
				}
				var input = tds[i].innerHTML;
				var output;
				if (flag == true) {
					var output = input.toLowerCase();
				} else {
					var output = input.toUpperCase();
				}
				tds[i].innerHTML = output;
			}
			flag = !flag;
		})
		$("#change").click(function() {
			$("body").css("background-color", $("#color").val());
		})
	})
</script>
</head>
<body>
	<center>
		<div style="width: 200px; height: 200px">
			<%
				char startIndex = 65;
			%>
			<table>
				<%
					while (startIndex < 90) {
				%>
				<tr>
					<%
						for (int i = 0; i < 6; i++) {
					%>
					<td><%=startIndex%></td>
					<%
						if (startIndex >= 90) {
									break;
								}
								startIndex++;
							}
					%>
				</tr>
				<%
					}
				%>
			</table>
			<center>
				<button id="toggle">切换</button>
			</center>
		</div>
	</center>
	<center>
		<div>
			请输入16进制颜色代码：<br> 
			<input type="text" id="color"><br>
			<button id="change">背景更改</button>
		</div>
	</center>
</body>
</html>